<template>
  <div class="avatar" :style="[
    {
      width: `${size}px`,
      height: `${size}px`,
      background: `url(${avatarUrl}) center/100% no-repeat`
    }
  ]"></div>
  <!-- <div class="avatar"
       :style="[
			{
				width: `${size}px`,
				height: `${size}px`,
				background: `url(${goodsUrl}) center/100% no-repeat,url(${avatarUrl}) center/70% no-repeat`
			}
		]"></div> -->
</template>
<script lang="ts" setup>
let props = defineProps({
  goodsUrl: {
    type: String,
    default: ""
  },
  avatarUrl: {
    type: String,
    default: "https://cdn.codinghou.cn/coding/pc/icons/avatar/a-Cat.png"
  },
  size: {
    type: Number,
    default: 40
  }
});
</script>
<style lang="scss" scoped>
.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  // background: url("https://cdn.codinghou.cn/app/6dadfe1b-e3a1-4968-b4e7-209ae4826f3c.png")
  // 		center/100% no-repeat,
  // 	url("https://cdn.codinghou.cn/coding/pc/icons/avatar/a-Cat.png")
  // 		center/70% no-repeat;
}
</style>
